<template>
  <div class="moment-main">
    <img class="group_logo" :src="moment.user_logo"
         alt="">
    <div class="moment">
      <span class="user_name"><b>{{moment.user_name}}</b></span>
      <div class="time">{{moment.update_time}}</div>
      <div class="content_detail">{{moment.content}}
      </div>
    </div>
    <div class="btn-group">
      <ul>
        <li>
          <a href="javascript:"><span class="pos"><i class="el-icon-check"></i>已读</span></a>
        </li>
        <li>
          <a href="javascript:"><span class="pos"><i class="el-icon-delete"></i>删除</span></a>
        </li>
      </ul>
    </div>
  </div>

</template>
<script>
  export default {
    props: ['user_id'],
    data () {
      return {
        moment: {
          user_logo: 'https://tva2.sinaimg.cn/crop.0.0.512.512.50/9e5389bbjw8eylgqjhrzsj20e80e8jrw.jpg',
          user_name: '通知',
          content: ' Lm eos,  fugit hic illo inventore labore obcaecati quibusdam quis totam unde        veritatis vero voluptate voluptates.    '
        }
      }
    }
  }
</script>
<style scoped>
  .moment-main {
    text-align: left;
    background: #fff;
    width: 560px;
    padding: 20px 20px 4px;
  }

  .moment {
    width: 500px;
    overflow: hidden;
  }

  .moment .time {
    font-size: 0.8em;
    margin: 5px 0;
    color: #808080;

  }

  .moment-main img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    float: left;
    margin: 5px;

  }

  .btn-group {
    width: 560px;
    height: 40px;
    line-height: 40px;
    margin-top: 10px;
    /*background: red;*/
    overflow: hidden;
  }

  ul {
    padding: 0;
    margin: 0 -2px;
    border-top: 1px solid gray;
    text-align: center;
    overflow: hidden;
  }

  ul li {
    vertical-align: middle;
    display: inline-block;
    list-style: none;
    height: 40px;
    line-height: 40px;
    width: 281px;
    float: left;
    border-right: 1px solid gray;
    /*background: pink;*/

  }

  ul li a {
    display: block;
    width: 100%;
    height: 100%;
    color: #8090B5;
  }
</style>
